<template>
  <div class="video-library">
    <div class="search-bar">
      <el-input v-model="keywords" class="input" @input="getProgramList()" placeholder="请输入作品名称搜索" clearable size="large">
        <template #append>
          <svg-icon icon-class="search" style="font-size: 16px;"/>
        </template>
      </el-input>
      <!-- <el-button v-if="loginStore.userinfo.nickname" @click="go_add()" class="add_btn" size="large" round> <svg-icon icon-class="plus" style="font-size: 16px;margin-right: 3px;"/>发布作品</el-button> -->
    </div>
    <div class="content">
      <!-- 类型 -->
      <type-list :typeList="typeList" :programTypeId="programTypeId" @changeType="changeType" />      
      <!-- 作品瀑布流列表 -->
      <VideoList :videoList="programList"/>
      <!-- 分页组件 -->
      <!-- <el-pagination style="margin-top: 16px;"
        background
        layout="total, prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange">
      </el-pagination>		 -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { programType, program } from "@/api/pcApi";
import { useLoginStore } from '../api/store'; 

import VideoList from '@/components/video-list.vue'
import TypeList from "@/components/TypeList.vue";

const router = useRouter();
const loginStore = useLoginStore();

const keywords = ref('')
const typeList = ref([])
const programList = ref([])
const currentPage = ref(1)
const pageSize = ref(1000)
const total = ref(0)

// 获取类型列表
const getTypeList = async () => {
  try {
    const res = await programType()
    typeList.value = res || []
    typeList.value.unshift({id: '', name: '全部'})
  } catch (error) {
    console.log(error)
  }
}

const changeType = (id) => {
  programTypeId.value = id
  getProgramList()
}

// 获取作品列表
const programTypeId = ref('')
const getProgramList = async () => {
  try {
    programList.value = []
    const res = await program({pageNum: currentPage.value, pageSize: pageSize.value, programTypeId: programTypeId.value || '', name: keywords.value || ''})   
    programList.value = res.rows || []
    total.value = res.total || 0
  } catch (error) {
    console.log(error)
  }
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  getProgramList()
}

const go_add = () => {
  router.push('/video-upload')
}

onMounted(() => {
  getTypeList()
  getProgramList()
})

</script>

<style lang="less" scoped>
.video-library {  
  .search-bar {    
    background: url('../assets/image/home/banner2.jpg') no-repeat;
    background-size: 100% 100%;
    padding-top: 208px;
    padding-bottom: 122px;
    text-align: center;
    .input {    
      width: 808px;
      :deep(.el-input__wrapper) {
        // border-radius: 8px!important;

      }
    }
    .add_btn {
      margin-left: 16px;
			&:hover {
				background: #B30000;
				color: #fff;
        border-color: #B30000;
			}
    }
  }
  .content {
    width: 1160px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 180px;
    .program-con {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      .program-item {
        width: 370px;
        height: 652px;
        border-radius: 8px;
        cursor: pointer;
        img {          
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>